<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        #top{
            width: 800px;
            margin: 100px auto;
        }
        #daohang{
            height: 50px;
            background-color: #aaa;
            text-align: center;
            line-height: 50px;
        }
        #daohang span{
            margin: 0 50px;
            color: white;
            font-size: 20px;
        }
        #daohang span:hover{
            border-bottom: 1px solid orange;
            color: orange;
        }
        #neir ul{
            width: 100px;
            display: inline-block;
            list-style: none;
            margin: 0 25px;
            border: 1px solid #aaa;
            visibility: hidden;
        }
        #neir li{
            width: 80px;
            height: 20px;
            color: #aaa;
            display: inline-block;
            margin: 20px 0px;
            border-bottom: 1px solid white;
        }
        #neir li:hover{
            border-bottom: 1px solid #aaa;
        }
        #neir .on{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="top">
        <div id="daohang">
            <span dd="0">公司简介</span>
            <span dd="1">产品介绍</span>
            <span dd="2">联系我们</span>
            <span dd="3">人才招聘</span>
        </div>
        <div id="neir">
            <ul>
                <li>概况介绍</li>
                <li>发展历史</li>
                <li>公司实力</li>
            </ul>
            <ul>
                <li>软件研发</li>
                <li>软件教育</li>
                <li>天使投资</li>
            </ul>
            <ul>
                <li>公司地址</li>
                <li>联系方式</li>
                <li>投资加盟</li>
            </ul>
            <ul>
                <li>iOS招聘</li>
                <li>HTML5招聘</li>
                <li>PHP招聘</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>

    $('#daohang span').mouseover(function(){
        var index=$(this).attr('dd');
        $('#neir ul').eq(index).css('visibility','visible').siblings().css('visibility','hidden');
    });
    $('#neir ul').hover(function(){
        $(this).css('visibility','visible');
    },function(){
        $(this).css('visibility','hidden');
    })

</script>